
<!-- 
All rights Reserved, Designed By www.youyacao.com 
@Description:用户名密码登录
@author:成都市一颗优雅草科技有限公司     
@version V3.7 
注意：本前端源码遵循 MulanPSL-2.0开源协议（木兰宽松许可证）本内容仅限于个人参考，禁止用于其他的商业用途
需要商业用途或者定制开发等可访问songshu.youyacao.com   联系QQ:422108995 23625059584

 -->

<template>
	<view>
		<view class="head">
			<view class="left-wrapper" @click="back">
				<uni-icons color="#000000" class="back" size="30" type="arrowleft" />
			</view>
			<view class="search-wrapper">
				<view></view>
			</view>
			<view class="right-wrapper">

			</view>
		</view>
		<view class="content">
			<view class="login-wrapper">
				<view class="login-title">
					<text>用户名密码登录</text>
				</view>
				<input class="login-input" type="text" placeholder="用户名/手机号/邮箱号" placeholder-class="input-placeholder" v-model="username" />
				<input class="login-input" type="password" placeholder="请输入密码" placeholder-class="input-placeholder" v-model="password" />
				<view class="code-wrapper">
					<input class="login-input code-input" type="text" placeholder="请输入验证码" placeholder-class="input-placeholder" v-model="vcode" />
					<image class="vcode" :src="captcha" @click="getCaptcha()" mode="scaleToFill"></image>
				</view>
				<button class="login-btn" @tap="login">登陆</button>
				<button class="register-btn" @tap="register"  v-on:click="Registertj" >注册账号</button> 
				<text class="other-login-text" @tap="toPhoneLogin">手机号登录 ></text>
				<view class="login-tips">
					<text>登陆表示同意"</text><text class="active" @tap="userAgreement">用户协议</text><text>"和"</text><text class="active" @tap="privacyProtocol">隐私政策</text>"
				</view>
			</view>
			<view class="other-login">
				<view class="other-title">
					<text>更多登陆方式</text>
				</view>
				<view class="other-login-type-wrapper">
					<view class="item-other-login" @tap="loginType(0)">
						<image src="../../static/icon/weixin.png"></image>
						<text>微信</text>
					</view>
					<view class="item-other-login" @tap="loginType(1)"> 
						<image src="../../static/icon/weibo.png"></image>
						<text>微博</text>
					</view>
					<view class="item-other-login" @tap="loginType(2)">
						<image src="../../static/icon/qq.png"></image>
						<text>QQ</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				captcha:'',
				username: '',
				password: '',
				vcode:''
			}
		},
		onLoad() {
			this.getCaptcha();
		},
		methods: { 
			getCaptcha(){
				let url = this.$config+'/index/index/captcha?_='+(new Date().getTime())
				this.captcha=url;
			},
			toPhoneLogin(){
				uni.redirectTo({
					url:'./login'
				})
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			loginType(typeid) {
				switch (typeid) {
					case 0:
						uni.login({
							provider: 'weixin',
							success: function(loginRes) {
								//console.log(loginRes.authResult);
							},
							fail: (res) => {
								//console.log(res);
							}
						});

						break;
					case 1:
						uni.login({
							provider: 'sinaweibo',
							success: function(loginRes) {
								//console.log(loginRes.authResult);
							},
							fail: (res) => {
								console.log(res);
							}
						});

						break;
					case 2:
						uni.login({
							provider: 'qq',
							success: function(loginRes) {
								//console.log(loginRes.authResult);
							},
							fail: (res) => {
								//console.log(res);
							}
						});
						break;
				}
			},
		userAgreement() {
			uni.navigateTo({
				url: '/pages/webview?url='+encodeURIComponent('https://songshu.youyacao.com/detail/220.html'),
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
		privacyProtocol() {
			uni.navigateTo({
				url: '/pages/webview?url='+encodeURIComponent('https://songshu.youyacao.com/detail/221.html'),
				success: res => {},
				fail: () => {},
				complete: () => {}
			});
		},
			login() {
				if (this.username == '' || this.username.length ==0) {
					uni.showToast({
						title: '请输入正确的用户名',
						icon: 'none'
					});
					return;
				}
				
				if (this.password == '' || this.password.length == 0) {
					uni.showToast({
						title: '请输入密码',
						icon: 'none'
					});
					return;
				}
				if (this.vcode == '' || this.vcode.length ==0) {
					uni.showToast({
						title: '请输入验证码',
						icon: 'none'
					});
					return;
				}
				this.$api.userLogin({
					username: this.username,
					password: this.password,
					vcode:this.vcode,
					type: 'uap'
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '登陆失败,' + res.data.msg,
							icon:'none'
						});
						return;
					}
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						duration: 1000,
						complete: () => {
							uni.navigateBack({
								delta: 1
							});
						}
					});
					//登陆成功
					this.$store.dispatch('getUserInfo');


				});
			},
			register(){
				uni.redirectTo({
					url:'./register'
				})
			},
			sendSms() {
				if (this.isSend) {
					return;
				}
				if (this.phone == '' || this.phone.length != 11) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					});
					return;
				}
				this.$api.sendSms({
					phone: this.phone
				}).then((res) => {
					if (res.data.code == 1) {
						uni.showToast({
							title: '发送失败',
							icon: 'none'
						});
						return;
					}
					uni.showToast({
						title: '发送成功'
					});
					this.isSend = true;
					this.smsInterval = setInterval(() => {
						if (this.time > 0) {
							this.time--;
						} else {
							clearInterval(this.smsInterval);
							this.isSend = false;
							this.time = 60;
						}
					}, 1000);
				}).catch(e => {
					uni.showToast({
						title: '发送失败',
						icon: 'none'
					});
				});
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		width: 100%;
		background: $uni-bg-color;
	}

	.head {

		align-items: center;
		position: fixed;
		
		//#ifdef APP-PLUS
		padding-top: 44rpx;
		//#endif
		z-index: 1;
		left: 0;
		right: 0;
		background: $uni-bg-color;
		width: 100%;
		display: flex;
		flex-direction: row;
		height: 88rpx;
		// background-color: red;
	}

	.left-wrapper {
		margin-left: 12rpx;
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
	}

	.right-wrapper {
		height: 88rpx;
		line-height: 88rpx;
		flex-direction: row;
		// background: #007AFF;
		justify-content: center;
		flex: 1;
		margin-right: 24rpx;
	}

	.search-wrapper {
		text-align: center;
		line-height: 76rpx;
		height: 76rpx;
		// background: #09BB07;
		flex: 10;
		flex-direction: row;
		align-items: center;
		align-content: center;
		justify-content: center;

		text {
			line-height: 76rpx;
			height: 76rpx;
		}
	}

	.search {
		height: 88rpx;
		line-height: 88rpx;
		flex: 1;
	}

	.content {
		height: 800rpx;
		display: flex;
		flex-direction: column;
		position: relative;
		padding-top: 88rpx;
		
		//#ifdef APP-PLUS
		padding-top: 128rpx;
		//#endif
		height: 100%;
		width: 100%;
	}

	.login-wrapper {
		flex: 9;
		padding: 76rpx;
		padding-bottom: 120rpx;

		.login-title {
			font-size: 48rpx;
			font-family: PingFang SC;
			font-weight: 400;

		}

		.login-input {

			margin-top: 64rpx;
			border-bottom: 1rpx solid rgba($color: #000000, $alpha: .2);
			padding-top: 12rpx;
			padding-bottom: 18rpx;
		}

		.code-input {
			padding-right: 160rpx;
		}

		.input-placeholder {
			color: rgba($color: #000000, $alpha: .3);
		}

		.code-wrapper {
			position: relative;
			.vcode{
				display: inline-block;
				width: 160rpx;
				height: 100%;
				position: absolute;
				right: 8rpx;
				bottom: 8rpx;
			}
			.send-btn {

				display: inline-block;
				height: 64rpx;
				position: absolute;
				right: 8rpx;
				top: 18rpx;
			}
		}

		.other-login-text {
			line-height: 38rpx;
			text-align: center;
			margin: 24rpx auto;
			color: $uni-text-color-active;
			display: flex;
			justify-content: center;
		}

		.login-btn { 
			margin-top: 48rpx;
			font-size: 36rpx;
			background-color: $uni-text-color-active;
			color: $uni-text-color-inverse;
			border-radius: 50rpx;
		}
			
		.login-tips {
			height: 50rpx;
			width: 100%;
			text-align: center;
			margin-top: 48rpx;
			margin-bottom: 48rpx;
			font-size: 24rpx;
			color: #666;
		}
		.register-btn {
			margin-top: 24rpx;
			font-size: 36rpx;
			background-color: $uni-text-color-active;
			color: $uni-text-color-inverse;
			border-radius: 50rpx;
		}
	}

	.other-login {
		padding: 76rpx;
		flex: 3;

		.other-title {
			text-align: center;
			position: relative;

			text {
				z-index: 1;
				padding: 24rpx;
				font-size: 26rpx;
				color: rgba($color: #000000, $alpha: .5);

				&:before {
					content: '';
					position: absolute;
					top: 48%;
					height: 1rpx;
					background: rgba($color: #000000, $alpha: .1);
					left: 0;
					width: 30%;
				}

				&:after {
					content: '';
					position: absolute;
					top: 48%;
					height: 1rpx;
					background: rgba($color: #000000, $alpha: .1);
					right: 0;
					width: 30%;
				}
			}
		}

		.other-login-type-wrapper {
			margin: 64rpx;
			display: flex;
			flex-direction: row;
			justify-content: center;

			.item-other-login {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				flex: 1;

				image {
					width: 100rpx;
					height: 100rpx;
				}

				text {
					font-family: PingFang SC;
					margin-top: 12rpx;
					color: rgba($color: #000000, $alpha: .4);
				}
			}
		}
	}

</style>
